<template>
  <div class="container-wrap">
    <uni-nav-bar fixed shadow :border="false" :title="title" left-icon="left" @clickLeft="onClickLeft" v-if="title">
      <template #bottom>
        <div class="uni-nav-bottom flex-wrap flex-middle">
          <uni-search-bar @confirm="searchList" v-model="name" placeholder="请输入搜索关键词"
                          @clear="() => { name=''; searchList() }" @cancel="searchList" cancelButton="none"
                          :radius="20"></uni-search-bar>
          <div class="font-14" style="padding: 0 10px;" @click="showAction = true">筛选</div>
        </div>
      </template>
    </uni-nav-bar>
    <div class="top-wrap active" v-else>
      <uni-search-bar @confirm="searchList" v-model="name" placeholder="请输入搜索关键词"
                      @clear="() => { name=''; searchList() }" @cancel="searchList" cancelButton="none"
                      :radius="20"></uni-search-bar>
    </div>
    <div class="list-wrap common-wrap">
      <van-list v-model="listLoading" :finished="listFinished" finished-text="没有更多了" @load="loadMore">
        <ListItem :list="list" vertical></ListItem>
      </van-list>
    </div>
    <van-action-sheet v-model="showAction">
      <div class="action-content">
        <div class="default-title">筛选状态</div>
        <CustomSelect v-model="studyStatus" :options="studyStatusOptions"></CustomSelect>
        <div class="mt20 dropdown-custom-bottom-btn">
          <button class="cancel-btn" round @click="onReset">重置筛选</button>
          <button type="primary" round @click="searchList">确认</button>
        </div>
      </div>
    </van-action-sheet>
  </div>
</template>

<script>
import ListItem from '@/components/training/listItem.vue'
import CustomSelect from '@/components/common/CustomSelect'
import VanList from "@/components/vant/van-list/van-list.vue";
import VanActionSheet from "@/components/vant/van-action-sheet/van-action-sheet.vue";
import mockData from "@/mock/index/configData.json"
export default {
  data() {
    return {
      name: '', // 1
      page: {
        pageNumber: 1,
        pageSize: 10,
      },
      list: [], // 课程列表
      listLoading: false,
      listFinished: false,
      showAction: false,
      studyStatus: [],
      studyStatusOptions: [{name: '全部', value: ''}].concat([
        {name: '未开始', value: '1'},
        {name: '学习中', value: '2'},
        {name: '已学完', value: '5'}
      ]),
    }
  },
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  components: {
    VanActionSheet,
    VanList,
    ListItem,
    CustomSelect
  },
  mounted() {
   this.getList()
  },
  methods: {
    onClickLeft() {
      uni.navigateBack({delta: 1})
    },
    // 查询
    searchList() {
      uni.showToast({
      	title:"该功能需自己实现",
		icon:"none"
      })
    },

    onReset() {
      this.studyStatus = []
      this.showAction = false
      this.searchList()
    },

    getList(loadNew = false) {
		if(loadNew) return;
		 this.list = this.list.concat(mockData.trainingData || [])
		this.listFinished = true
    },
    loadMore() {
      if (!this.listFinished) this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.van-nav-bar.van-hairline--bottom::after {
  display: none;
}

:deep(.qy-com-learn-course) {
  padding-top: 50px;

  .search-bar {
    padding: 0;
  }

  .van-search {
    padding-top: 0;
  }

  .font-btn {
    margin-top: 8px !important;
  }
}

.container-wrap {
  position: relative;
}

.top-wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background: #fff;

  .van-nav-bar {
    & + .van-search {
      padding-top: 0;
    }
  }

  &.active {
    position: absolute;
    padding: 5px 0;

    & + .list-wrap {
      padding-top: 50px;
      height: calc(100vh - 235px);
    }
  }
}

.list-wrap {
  padding-top: 50px;
  overflow: auto;
  height: calc(100vh - var(--status-bar-height) - 44px);
}

.filter-btn {
  width: 30px;
  height: 30px;
  background: url(../../static/image/filter.png) center center no-repeat;
  background-size: 20px 20px;
}
</style>
